<!--
 * @Author: fengYM feng25321@163.com
 * @Date: 2023-09-25 13:43:26
 * @LastEditors: fengYM feng25321@163.com
 * @LastEditTime: 2023-10-17 14:11:38
 * @Description: 订单列表
-->
<template>
  <view class="">
    <view style="background: #fff">
      <u-tabs
        :list="tabList"
        @click="tabClick"
        :activeStyle="{
          color: '#333',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :current="tabActive.index"
        lineWidth="28"
        :inactiveStyle="{
          color: '#686586',
        }"
        lineColor="#81D8D0"
      ></u-tabs>
    </view>
    <view class="main">
      <template v-if="orderList?.length > 0">
        <view>
          <view class="itemBox" @click="goPage('/pages/shop/goodsDetails/serviceDetails')">
            <view class="firstLine">
              <view class="l">订单号:{{ 12313 }}</view>
              <view class="r">{{ 123123 || "" }}</view>
            </view>
            <view class="timeLine">{{ dayjs().format("YYYY-MM-DD HH:ss:mm") }}</view>
            <view class="nameBox">
              <image class="img" src="" mode=""></image>
              <view class="nameInfo">
                <view class="f">{{ "123123" }}</view>
                <view class="t">
                  <view class="l">x{{ 1 }}</view>
                  <view class="price">
                    <text>￥</text>
                    {{ 123 }}
                  </view>
                </view>
              </view>
            </view>
            <view class="btnList">
              <view class="btn-type">联系客服</view>
              <view class="btn-type blue">取消预约</view>
            </view>
          </view>
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
      <u-loadmore height="30" :status="pageStatus" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { goPage } from "@/utils/commonFn";
import dayjs from "dayjs";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
type tabProps = {
  name: string;
  value: string;
  index?: number;
};
const { status } = defineProps<{
  status: any;
}>();
const tabActive = ref({
  index: 0,
  value: "",
});
const tabList = ref<tabProps[]>([
  {
    name: "全部",
    value: "",
  },
  {
    name: "未使用",
    value: "WAIT_PAY",
  },
  {
    name: "已使用",
    value: "IN_DISTRIBUTION ",
  },
]);
const pageStatus = ref("loadmore");
const page = ref(1);
const orderList = ref<any[]>([{}]);
onBeforeMount(() => {
  getOrderList();
});
const getOrderList = async () => {
  const res: any = await selectShopOrderLst({
    userId: uni.getStorageSync("userId"),
    status: tabActive.value.value,
  });
  orderList.value = res.orderList;
};
const getList = async () => {
  if (pageStatus.value == "nomore") {
    return;
  }
  pageStatus.value = "loadmore";
  // const res = await selectShopOrderLst({ pageNo: page.value, userId: uni.getStorageSync("userId"), status: tabActive.value.value });
  // orderList.value = orderList.value.concat(res.orderList);
  if (!res.next) {
    pageStatus.value = "nomore";
  } else {
    pageStatus.value = "loadmore";
  }
};
const reset = () => {
  page.value = 1;
  pageStatus.value = "loadmore";
  orderList.value = [];
  getList();
};
onReachBottom(() => {
  page.value++;
  getList();
});
const tabClick = (e: tabProps) => {
  tabActive.value.index = e.index as number;
  tabActive.value.value = e.value;
  reset();
};
</script>

<style lang="less" scoped>
/deep/ .u-tabs__wrapper__nav__item {
  padding: 0 50px !important;
}
.main {
  margin-top: 20rpx;
}
@import "../../../pages/myPage/editPage/edit.less";

.itemBox {
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 24rpx 32rpx;
  background: #fff;
  margin-bottom: 20rpx;
  .firstLine {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .l {
      font-size: 24rpx;
      line-height: 34rpx;
    }
    .r {
      font-size: 26rpx;
      font-weight: 500;
      background: linear-gradient(180deg, #ee9578 0%, #eb5693 100%);
      -webkit-background-clip: text;
      color: transparent;
      line-height: 36rpx;
    }
  }
  .timeLine {
    font-size: 24rpx;
    color: #999999;
    line-height: 30rpx;
    margin-top: 8rpx;
    margin-bottom: 24rpx;
  }
}
.nameBox {
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .img {
    width: 144rpx;
    height: 144rpx;
    margin-right: 24rpx;
  }
  .nameInfo {
    width: calc(100% - 168rpx);
    .f {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 36rpx;
      text {
        margin-right: 24rpx;
      }
    }
    .s {
      font-size: 26rpx;
      color: #bebebe;
      line-height: 36rpx;
      margin-top: 8rpx;
    }
    .t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      .l {
        font-size: 24rpx;
        color: #bebebe;
        line-height: 34rpx;
      }
      .price {
        font-size: 30rpx;
        font-weight: bold;
        line-height: 34rpx;
        text {
          font-size: 24rpx;
          font-weight: 500;
          margin-right: -15rpx;
        }
      }
    }
  }
}
.btnList {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20rpx;
  .btn-type {
    font-size: 28rpx;
    color: #a4a4a4;
    line-height: 40rpx;
    text-align: center;
    padding: 12rpx 24rpx;
    margin-right: 20rpx;
    background: #f1f1f1;
    border-radius: 50px;
    &:last-child {
      margin-right: 0;
    }
  }
  .blue {
    background: #7fd8ce;
    color: #fff;
  }
}
</style>
